<template>
  <div>

    <h3>整体统计</h3>
    <el-descriptions :column="3" class="margin-top" border>
      <el-descriptions-item>
        <template slot="label">
          考试名称
        </template>
        {{ detail.title }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          开放类型
        </template>
        {{ detail.openType_dictText }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          应考人数
        </template>
        <span v-if="statData.totalUser===-1">--</span>
        <span v-else>{{ statData.totalUser }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          实考人数
        </template>
        {{ statData.actualUser }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          缺考人数
        </template>
        {{ statData.missUser }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          通过人数
        </template>
        {{ statData.passUser }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          通过比例
        </template>
        {{ statData.passRate }}%
      </el-descriptions-item>
    </el-descriptions>

  </div>

</template>

<script>
import { simpleDetail } from '@/api/exam/exam'
import { apiExamOverview } from '@/api/stat/exam'
import permission from '@/directive/permission'


export default {
  directives: { permission },
  data() {
    return {
      activeName: 'first',
      examId: '',
      statData: '',
      onlineList: [],
      detail: {}
    }
  },

  created() {
    // 获取考试信息
    this.examId = this.$route.params.examId

    // 获取数据
    this.fetchData()
  },
  methods: {

    fetchData() {
      apiExamOverview(this.examId).then(response => {
        this.statData = response.data
      })

      simpleDetail(this.examId).then(response => {
        this.detail = response.data
      })
    }
  }
}
</script>

<style scoped>

.stat-item{
  line-height: 38px;
  font-size: 14px;
  color: #333;
}

.stat-item span{
  color: #666;
}

::v-deep .el-descriptions-item__label{
  width: calc(100vw / 12)
}
::v-deep .el-descriptions-item__content{
  width: calc(100vw / 4);
}

</style>

